let iNow=0;
let iPrev=$("#banner ul").children().length-1;
console.log(iPrev);
$('#banner ul').find('li').eq(0).siblings().css('left',1300);






//左击
$('#banner p.left').click(function(){
	if(iNow==0){
		iNow=$("#banner ul").children().length-1;
		iPrev=0;
	}else{
		iNow--;
		iPrev=iNow+1;
	}
	
	//走的从0 走到1200的位置
	$('#banner ul').find('li').eq(iPrev).css('left',0);
	$('#banner ul').find('li').eq(iPrev).animate({left:1300},1000)
	//进来的从-1200位置走到0
	$('#banner ul').find('li').eq(iNow).css('left',-1300);
	$('#banner ul').find('li').eq(iNow).stop().animate({left:0},1000)
})


//右击
$('#banner p.right').click(function(){
	if(iNow==$("#banner ul").children().length-1){
		iNow=0;
		iPrev=$("#banner ul").children().length-1;
	}else{
		iNow++;
		iPrev=iNow-1;
	}
	
	//走的从0 走到-1200的位置
	$('#banner ul').find('li').eq(iPrev).css('left',0);
	$('#banner ul').find('li').eq(iPrev).animate({left:-1300},1000)
	//进来的从1200位置走到0
	$('#banner ul').find('li').eq(iNow).css('left',1300);
	$('#banner ul').find('li').eq(iNow).stop().animate({left:0},1000)
})



//自动生成banner图下面的导航
let str="";
for(var i=0;i<$("#banner ul").children().length;i++){
	str+='<span></span>';
}
$('#banner .list').html(str);
$('#banner .list').children().eq(0).addClass('active').siblings().removeClass('active');

//这是自动轮播
let t=setInterval(()=>{
	$('#banner p.right').trigger('click');
	$('#banner .list').children().eq(iNow).addClass('active').siblings().removeClass('active');
	
},5000);


//鼠标进入离开暂停和开始
$('#banner').hover(function(){
	clearInterval(t);
},function(){
	t=setInterval(()=>{
   $('#banner .list').children().eq(iNow+1).addClass('active').siblings().removeClass('active');
	$('#banner p.right').trigger('click');
},5000);
})






//点击list对应出界面

$('#banner .list').on('click','span',function(){
	//要走的小于点击的 =======右击
	if(iNow<$(this).index()){
		//这个时候INow是要走的
		$('#banner ul').find('li').eq(iNow).css('left',0);
		$('#banner ul').find('li').eq(iNow).animate({left:-1300},1000)
		
		//这个时候是点击的那个元素进来$(this).index()；
		$('#banner ul').find('li').eq($(this).index()).css('left',1300);
		$('#banner ul').find('li').eq($(this).index()).stop().animate({left:0},1000)
		
		iNow=$(this).index();
		//这个是小list的效果！这里不用从iNow+1开始，点谁谁开始
		 $('#banner .list').children().eq(iNow).addClass('active').siblings().removeClass('active');
	}
	
	//要走的小于点击的 =======左击
	if(iNow>$(this).index()){
		//走的从0 走到1200的位置
		$('#banner ul').find('li').eq(iNow).css('left',0);
		$('#banner ul').find('li').eq(iNow).animate({left:1300},1000)
		//进来的从-1200位置走到0
		$('#banner ul').find('li').eq($(this).index()).css('left',-1300);
		$('#banner ul').find('li').eq($(this).index()).stop().animate({left:0},1000)
		
		iNow=$(this).index();
		//这个是小list的效果！这里不用从iNow+1开始，点谁谁开始
		 $('#banner .list').children().eq(iNow).addClass('active').siblings().removeClass('active');
	}
})




//我从导航栏滑过的时候有特别效果!
$('nav #nav ul li').hover(function(){
   $(this).addClass('active').siblings().removeClass('active');
   //当进入时清除二级菜单的效果
   $('#subNav ul>li ol>li').removeClass('yellow');
   $('#subNav').css('display','block').find('ul').children('li').eq($(this).index()).css('display','block').siblings().css('display',"none");
  
},function(){
	$('nav #nav ul li').removeClass('active');
	   $('#subNav').find('ul').children('li').eq($(this).index()).css('display','block').siblings().css('display',"none");
	
})

//离开nav时二级菜单消失
$('nav').mouseleave(function(){
	$('#subNav').css('display','none');
})

//滑过二级菜单时,出现色彩变化

$('#subNav ul>li ol>li').hover(function(){
	
   $(this).addClass('yellow').siblings().removeClass('yellow');
},function(){
	$(this).removeClass('active');
	
})



